<template>
    <!-- 设置 -->
    <view class="page px-[32rpx]">
      <!-- LOGO区域 -->
      <!-- <view class="">
        <text lines="1" class="text_4">LOGO</text>
      </view>
      <text lines="1" decode="true" class="text_5">v&nbsp;1.0</text> -->
      <view class="mt-[64rpx]">
        <view class="flex flex-col items-center ">
          <image  src="@/static/images/img/qqq.jpg" class="w-[156rpx] h-[156rpx] rounded-[32rpx]"></image>
          <view class="mt-[16rpx]">v 1.0</view>
        </view>
      </view>
      <!-- 菜单项 -->
      <view class="box_3">
        <text lines="1" class="text_6">隐私协议</text>
        <image src="@/static/images/icon/zuo-left.png" class="thumbnail_4"></image>
      </view>
      <view class="box_4"></view>
      
      <view class="box_5">
        <text lines="1" class="text_7">用户须知</text>
        <image src="@/static/images/icon/zuo-left.png" class="thumbnail_4"></image>
      </view>
      <view class="box_6"></view>
      
      <view class="box_7">
        <text lines="1" class="text_8">平台信息管理规范</text>
        <image src="@/static/images/icon/zuo-left.png" class="thumbnail_4"></image>
      </view>
      <view class="box_8"></view>
      
      <view class="box_9">
        <text lines="1" class="text_9">联系我们</text>
        <image src="@/static/images/icon/zuo-left.png" class="thumbnail_4"></image>
      </view>
      
      <!-- 退出登录按钮 -->
      <view class="logout-btn-wrapper">
        <up-button 
          text="退出登录" 
          :customStyle="{
            width: '686rpx',
  height: '88rpx',
  color: 'rgba(255,239,184,1)',
  fontSize: '32rpx',
  fontWeight: '500',
  fontFamily: 'PingFangSC-Medium',
  background: 'linear-gradient( 98deg, #454545 0%, #000000 100%)',
  backgroundSize: '100% 100%',
  border: 'none',
  borderRadius: '16rpx',
  lineHeight: '48rpx'
          }">
        </up-button>
      </view>
    </view>

</template>

<script setup>
import { ref } from 'vue';


</script>

<style scoped lang="scss">
.page {
  background-color: #F7F7F7;
  position: relative;
  width: 750rpx;
 
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
}


.box_3 {
  width: 686rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 180rpx 20rpx 0 0;
}
.text_6 {
  overflow-wrap: break-word;
  color: rgba(0,0,0,1);
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}
.thumbnail_4 {
  width: 28rpx;
  height: 28rpx;
  margin: 6rpx 0 6rpx 0;
}
.box_4 {
  background-color: rgba(216,216,216,1.000000);
  width: 686rpx;
  height: 2rpx;
  border: 1px solid rgba(237,237,237,1);
  display: flex;
  flex-direction: column;
  margin: 34rpx 20rpx 0 0;
}
.box_5 {
  width: 686rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 34rpx 20rpx 0 0;
}
.text_7 {
  overflow-wrap: break-word;
  color: rgba(0,0,0,1);
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}
.box_6 {
  background-color: rgba(216,216,216,1.000000);
  width: 686rpx;
  height: 2rpx;
  border: 1px solid rgba(237,237,237,1);
  display: flex;
  flex-direction: column;
  margin: 34rpx 20rpx 0 0;
}
.box_7 {
  width: 686rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 34rpx 20rpx 0 0;
}
.text_8 {
  overflow-wrap: break-word;
  color: rgba(0,0,0,1);
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}
.box_8 {
  background-color: rgba(216,216,216,1.000000);
  width: 686rpx;
  height: 2rpx;
  border: 1px solid rgba(237,237,237,1);
  display: flex;
  flex-direction: column;
  margin: 34rpx 20rpx 0 0;
}
.box_9 {
  width: 686rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 34rpx 20rpx 0 0;
}
.text_9 {
  overflow-wrap: break-word;
  color: rgba(0,0,0,1);
  font-size: 28rpx;
  font-family: PingFang-SC-Medium;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
}
.logout-btn-wrapper {
  margin-top: 404rpx;
}
</style>